<template>
  <div class="obtain">
    <section class="obtain__bread-crumb">
      <BreadCrumb
        v-model:dateRange="dateRange"
        :show-date="true"
        @change="dateChange"
      />
    </section>
    <section class="base-page-container obtain__search">
      <BaseRadioGroupLabelItem
        v-model:select="deviceSelect"
        label="设备"
        :options="deviceOptions"
        @change="deviceChange"
      />
    </section>
    <!-- 新增访客数 -->
    <section class="base-page-container">
      <section class="obtain__title">新增访客数</section>
      <div class="obtain__sales">
        <span class="obtain__sales__label">最高新增访客数为<strong class="obtain__sales__value">2,923</strong></span>
        <span class="obtain__sales__label">最低新增访客数为<strong class="obtain__sales__value">61</strong></span>
        <span class="obtain__sales__label">所选区间新增总访<strong class="obtain__sales__value">61</strong></span>
      </div>
      <div class="obtain__chart">
        <KLineChart
          width="100%"
          height="236px"
          x-type="date"
          y-type="number"
          :x-data="lineChartXData"
          :y-data="lineChartYData"
          :options="{ showSeriesName: true, seriesName: '新增访客数' }"
        />
      </div>
    </section>
    <!-- 登录成功转化 -->
    <section class="base-page-container">
      <section class="obtain__title">登录成功转化</section>
      <div class="obtain__sales">
        <span class="obtain__sales__label">所选区间转化总人数为<strong class="obtain__sales__value">2,923</strong></span>
        <span class="obtain__sales__label">所选区间转化<strong class="obtain__sales__value">61%</strong></span>
      </div>
      <div class="obtain__chart">
        <KLineBarChart
          width="100%"
          height="236px"
          x-type="date"
          :x-data="lineChartBarXData"
          :y-data="lineChartBarYData"
          :y-types="{bar:'number',line:'percent'}"
          :options="{ showSeriesName: true, seriesName: '新增访客数' }"
        />
      </div>
    </section>

  </div>
</template>
<script lang="ts" setup>
import dayjs from 'dayjs';
import { onMounted, ref, reactive, computed, watch, nextTick } from 'vue';
import { BaseRadioGroupLabelItem } from '@/components/base-form';
import { KLineChart, KLineBarChart } from '@/components/k-charts';
import BreadCrumb from '@/components/base-bread-crumb/index.vue';
import { deviceOptions } from './data.ts';
defineOptions({
  name: 'KgjPageSceneObtain'
});
const deviceSelect = ref(0);
const deviceChange = (val: string | number | boolean) => {
  console.log(val);
};
// 折线图表
const lineChartXData = ref([
  dayjs('2023-07-13 00:00:00').unix(),
  dayjs('2023-07-14 06:00:00').unix(),
  dayjs('2023-07-15 12:00:00').unix(),
  dayjs('2023-07-16 18:00:00').unix()
]);
const lineChartYData = ref([
  {
    name: '新增访客数',
    color: '#4975E9',
    data: [1000, 2000, 4000, 6000]
  }
]);
const lineChartBarXData = ref([
  dayjs('2023-07-13 00:00:00').unix(),
  dayjs('2023-07-14 06:00:00').unix(),
  dayjs('2023-07-15 12:00:00').unix(),
  dayjs('2023-07-16 18:00:00').unix()
]);
const lineChartBarYData = ref([
  {
    name: '转化人数',
    color: '#4975E9',
    type: 'bar',
    barWidth: 24,
    data: [1000, 2000, 4000, 6000]
  },
  {
    name: '转化率',
    color: '#67C23A',
    type: 'line',
    data: [10, 20, 40, 60]
  }
]);
const handleTransferData = () => {
  console.log(11);
};
//
const dateRange = ref(null);
const dateChange = () => {
  console.log(11);
};
onMounted(() => {
  nextTick(() => {
    handleTransferData();
  });
});
</script>
<style lang="scss" scoped>
.obtain {
  &__title {
    height: 24px;
    margin-bottom: $baseMarginBottom;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    color: #303133;
  }

  &__sales {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    color: #909399;
    letter-spacing: -.01px;

    &__label {
      padding-right: 24px;
    }

    &__value {
      padding-left: 2px;
      font-weight: 500;
      color: #606266;
    }
  }

  &__chart {
    display: flex;
    align-items: center;
    height: 236px;
    margin-top: 16px;
  }
}
</style>
